<template>
  <div class="h-full relative">
    <div v-if="pageName" class="font-semibold text-2xl pb-1 text-color-header absolute left-4.5 top-4.5">
      {{ pageName }}
    </div>
    <a-result
      class="sl-status h-full flex items-center justify-center flex-col"
      :title="t('common.cannotVisit')"
      :sub-title="t('common.noAuth')"
    >
      <template #icon>
        <Icon type="icon-wuquanxian" />
      </template>
    </a-result>
  </div>
</template>
<script lang="ts" setup>
import { useI18n } from "/@/locales/useI18n";
import Icon from "/@/components/Icon.vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { useMenuStore } from "/@/stores/aiot/menu";
import { findItemByKey } from "/@/utils/treeData";
import { onMounted, ref } from "vue";

const { t } = useI18n();
const route = useRoute();
const menuStore = useMenuStore();

const pageName = ref("");
function findMenuName(routeName: string) {
  const info = findItemByKey(menuStore.menuData, routeName, "functionUrl");
  if (info) {
    return info.item.title || "";
  }
  return "";
}
function setName(params: { name?: string; pageName?: string; [key: string]: any }) {
  if (params.pageName) {
    pageName.value = params.pageName;
  } else {
    pageName.value = findMenuName(params.name as string);
  }
}
onBeforeRouteUpdate((to) => {
  const params = to.params;
  setName(params);
});
onMounted(() => {
  setName(route.params);
});
</script>
